<template>
  <div>
    <div class="sidebar-top">
      <div class="header_logo"></div>
    </div>

    <!-- 设置用户头像 -->
    <div class="user">
      <div class="ivu-poptip">
        <div class="ivu-poptip-rel">
          <div class="usr-avatar">
            <img src="../assets/userhead.svg" width="24" />
          </div>
        </div>
      </div>
    </div>
    <div class="sidebar-cont">
      <el-card
        class="box-card"
        style="margin-bottom: 12px; background-color: rgba(255, 255, 255, 0.2)"
      >
        <div class="card-header" style="color: #dcdee2; padding-bottom: 15px">
          <span>解译算法</span>
        </div>

        <div class="card-body">
          <el-tabs type="border-card">
            <el-tab-pane label="变化检测">
              <el-card
                class="box-card"
                style="background-color: rgba(255, 255, 255, 0.2)"
              >
                <!-- 上传img的按钮 -->
                <el-button type="primary" @click="toGetImg">
                  请上传两张图片
                </el-button>

                <!-- 显示略缩图与删除选项 -->
                <div
                  class="smallImg-div"
                  v-for="(item, index) in arryImg"
                  :key="index"
                  style="margin: 10px"
                >
                  <div>
                    <el-checkbox
                      class="checkbox_l"
                      style="padding: 20px 20px 30px;"
                    >
                      <img
                        style="width: 150px; height: 150px; margin: 5px"
                        :src="item"
                        fit:fit
                      />
                      <!-- <div
                      class="MyEarthIntroduction"
                      style="background-color: #fff; align-items: center"
                    > -->
                      <el-icon @click="remove"><Delete /></el-icon>
                      <!-- </div> -->
                    </el-checkbox>
                  </div>
                </div>
              </el-card>
            </el-tab-pane>

            <el-tab-pane label="地物分类">
              <el-card
                class="box-card"
                style="background-color: rgba(255, 255, 255, 0.2)"
              >
                <!-- 上传img的按钮 -->
                <el-button type="primary" @click="toGetImg">
                  请上传图片
                </el-button>

                <!-- 显示略缩图与删除选项 -->
                <div
                  class="smallImg-div"
                  v-for="(item, index) in arryImg"
                  :key="index"
                  style="margin: 10px"
                >
                  <div>
                    <el-checkbox class="checkbox_l">
                      <img
                        style="width: 150px; height: 150px; margin: 5px"
                        :src="item"
                        fit:fit
                      />
                      <div
                        class="MyEarthIntroduction"
                        style="background-color: #fff; align-items: center"
                      >
                        <el-icon @click="remove"><Delete /></el-icon>
                      </div>
                    </el-checkbox>
                  </div>
                </div>
              </el-card>
            </el-tab-pane>

            <el-tab-pane label="目标检测">
                <el-card
                class="box-card"
                style="background-color: rgba(255, 255, 255, 0.2)"
              >
                <!-- 上传img的按钮 -->
                <el-button type="primary" @click="toGetImg">
                  请上传图片
                </el-button>

                <!-- 显示略缩图与删除选项 -->
                <div
                  class="smallImg-div"
                  v-for="(item, index) in arryImg"
                  :key="index"
                  style="margin: 10px"
                >
                  <div>
                    <el-checkbox class="checkbox_l">
                      <img
                        style="width: 150px; height: 150px; margin: 5px"
                        :src="item"
                        fit:fit
                      />
                      <div
                        class="MyEarthIntroduction"
                        style="background-color: #fff; align-items: center"
                      >
                        <el-icon @click="remove"><Delete /></el-icon>
                      </div>
                    </el-checkbox>
                  </div>
                </div>
              </el-card>
            </el-tab-pane>

            <el-tab-pane label="目标提取">
                <el-card
                class="box-card"
                style="background-color: rgba(255, 255, 255, 0.2)"
              >
                <!-- 上传img的按钮 -->
                <el-button type="primary" @click="toGetImg">
                  请上传图片
                </el-button>

                <!-- 显示略缩图与删除选项 -->
                <div
                  class="smallImg-div"
                  v-for="(item, index) in arryImg"
                  :key="index"
                  style="margin: 10px"
                >
                  <div>
                    <el-checkbox class="checkbox_l">
                      <img
                        style="width: 150px; height: 150px; margin: 5px"
                        :src="item"
                        fit:fit
                      />
                      <div
                        class="MyEarthIntroduction"
                        style="background-color: #fff; align-items: center"
                      >
                        <el-icon @click="remove"><Delete /></el-icon>
                      </div>
                    </el-checkbox>
                  </div>
                </div>
              </el-card>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-card>

      <!-- 上传文件 -->
    </div>
    <!-- 退到登录界面 -->
    <div class="exit" @click="backlogin"></div>

    <!-- 主界面显示大图 -->
    <div class="sidebar-center"  style="height: 100%">
      <!-- <iframe
        :src="showSrc"
        ref="iframe"
        style="width: 100%; height: 100%; scrolling:no"
        frameborder="no"
        border="0"
        :src="'data:image/png;base64,'+url_cd"
      >
      </iframe> -->
      <!-- <div class="demo-image__preview">
        <el-image
            style="width: 500px; height: 500px"
            :src="url_cd"
            :key="url_cd"
        >
        </el-image>
      </div> -->

    </div>
  </div>
</template>

<script>
/* eslint-disable */
import Axios from "axios";
import Vue, { ref } from "vue";
let inputElement = null;

import CDImage from '../../Result/变化检测.png'

export default {
  mounted() {
    console.log("Component mounted.");

    this.showSessionId = window.location.search;
    this.showSrc = `static/slider.html${this.showSessionId}`;

    this.iframeWin = this.$refs.iframe.contentWindow;
  },

  data() {
    return {
      arryImg: [], // 用来存储图片路径
      showImg: [], // 用来存储需要显示的图片路径

      showSessionId: "",
      showSrc: "",
    //   url_cd: "iVBORw0KGgoAAAANSUhEUgAAAoAAAAFoCAAAAADiWRWNAAAD0klEQVR4Ae3BC2oVUQAFwe79L/oaFEETPy8JzAlvukqSIUmGJBmSZEiSIUmGJBmSZEiSIUmGJBmSZEiSIUmGJBmSZEiSIUmGJBmSZEiSIQnywyFXk3uTXxxyNbkreeuQi8kNyV8ccjG5GfmHQy4mdyL/dMjV5Dbkvw65mNyEPOCQi8kNyKMOuZY8PXncIdeSZyfvcMi15PnJww65ljwv4fBC3ueQy8jTkg875CLy5OQjDrmGPDv5iMMDPOST5PnJfxzkd4cHyItDPkPuQN7n8BjhkM+QW5C/OCCvHXIVuQf5o8MLeeWQq8hdyFuHH+RXh1xG7kNeO/wkPx1yIbkT+c0ha3Iz8t0hX4LcjxzyRUgyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMmQJEOSDEkyJMnQN8uxI2m0pX2yAAAAAElFTkSuQmCC",
      url_cd: CDImage,
      iframeWin: {}
    };
  },
  name: "HomeView",
  methods: {
    sendIframeWinpMessage() {
      this.iframeWin.postMessage(
        {
          params: "ArryImg"
        },
        "*"
      );
    },

    backlogin() {
      this.$router.push("/LoginView");
    },

    toGetImg() {
      if (inputElement === null) {
        // 生成文件上传的控件
        inputElement = document.createElement("input");
        inputElement.setAttribute("type", "file");
        inputElement.style.display = "none";

        if (window.addEventListener) {
          inputElement.addEventListener("change", this.uploadFile, false);
        } else {
          inputElement.attachEvent("onchange", this.uploadFile);
        }

        document.body.appendChild(inputElement);
      }
      inputElement.click();
    },

    uploadFile(el) {
      if (el && el.target && el.target.files && el.target.files.length > 0) {
        console.log(el);
        const files = el.target.files[0];
        const isLt10M = files.size / 1024 / 1024 < 10;
        const size = files.size / 1024 / 1024;
        console.log(size);
        // 判断上传文件的大小
        if (!isLt10M) {
          this.$message.error("上传图片大小不能超过 10 MB!");
        } else if (files.type.indexOf("image") === -1) {
          // 如果不是图片格式
          // this.$dialog.toast({ mes: '请选择图片文件' });
          this.$message.error("请选择图片文件");
        } else {
          const that = this;
          const reader = new FileReader(); // 创建读取文件对象
          reader.readAsDataURL(el.target.files[0]); // 发起异步请求，读取文件
          reader.onload = function () {
            // 文件读取完成后
            // 读取完成后，将结果赋值给img的src
            that.arryImg.push(this.result) // 将每次上传的图片放到数组中
            // that.valueUrl = this.result;
            console.log(that.arryImg)

            if(that.arryImg.length == 2) {
                let api = ''
                let param = {'type': 0, 'image1': that.arryImg[0], 'image2': that.arryImg[1]}
                console.log('param', param)
                Axios.post(api, param).then((response) => {
                    console.log(response.data.pred)
                    
                    this.url_cd = 'data:image/png;base64,'+response.data.pred

                    console.log(this.url_cd)
                    
                }).catch((error) => {
                    console.log(error)
                })
            }
            // 数据传到后台
            // const formData = new FormData()
            // formData.append('file', files); // 可以传到后台的数据
          }
        }
      }
    },

    // 将选中的图片从数组中删除
    remove: function (e) {
      // 删除用户不喜欢的图片
      this.arryImg.splice(e, 1) // 删除数组索引2的位置以后的1个元素
    }
  }
}
</script>

<style>
.user {
  position: absolute;
  right: 10px;
  top: 20px;
  color: #fff;
  cursor: pointer;
  z-index: 4;
}

.ivu-poptip,
.ivu-poptip-rel {
  display: inline-block;
}

.usr-avatar[data-v-03060840] {
  width: 32px;
  height: 32px;
  display: block;
  background-color: #0f3a65;
  border-radius: 50%;
  padding: 6px 4px;
}

.checkbox_l {
  cursor: pointer;
  font-size: 12px;
  display: inline-block;
  /* margin-right: 8px; */
  border: 1px solid #dcdee2;
  min-height: 150px;
  border-radius: 3px;
  height: 36px;
  line-height: 34px;
  padding: 5px 15px;
  -webkit-transition: border 0.2s ease-in-out;
  -o-transition: border 0.2s ease-in-out;
  transition: border 0.2s ease-in-out;
}

.exit {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 20px;
  height: 20px;
  display: inline-block;
  padding: 6px;
  z-index: 20;
  border-radius: 2px;
  background-image: url(../assets/exitlogo.svg);
  align-items: center;
}

.sidebar-top {
  width: 100%;
  background-color: rgb(53, 45, 66) !important;
  height: 50px;
  color: antiquewhite;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
}

.sidebar-cont {
  position: fixed;
  top: 50px;
  left: 0;
  bottom: 50px;
  background-color: rgb(53, 45, 66) !important;
  font-size: 16px;
  height: 100vh;
  width: 490px;
  overflow-y: auto;
}

.sidebar-center {
  position: fixed;
  top: 200px;
  left: 500px;
  right: 0;
  padding: 10px 0;
  margin: 0 auto;
  /* max-width: 1400px; */
  /* bottom: 50px; */
  background-color: transparent;
  overflow-y: auto;
  align-items: center;
}

.header_logo {
  width: 110px;
  height: 30px;
  background: url(../assets/mylogo.svg);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  /* width: 480px; */
  color: #dcdee2;
  shadow: hover;
  border: 1px solid #dcdee2;
  border-top-color: rgb(232, 234, 236);
  border-top-style: solid;
  border-top-width: 1px;
  border-right-color: rgb(232, 234, 236);
  border-right-style: solid;
  border-right-width: 1px;
  border-bottom-color: rgb(232, 234, 236);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-left-color: rgb(232, 234, 236);
  border-left-style: solid;
  border-left-width: 1px;
  border-image-source: initial;
  border-image-slice: initial;
  border-image-width: initial;
  border-image-outset: initial;
  border-image-repeat: initial;
  border-color: #e8eaec;
  border-top-color: rgb(232, 234, 236);
  border-right-color: rgb(232, 234, 236);
  border-bottom-color: rgb(232, 234, 236);
  border-left-color: rgb(232, 234, 236);
}

.box-card-small {
  margin-top: 20px;
  margin-left: 10px;
}

.el-checkbox__label {
  padding-left: 0;
}
</style>
